<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人信息</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style type="text/css">
			.inputfile {
			    width: 0.1px; 
			    height: 0.1px; 
			    opacity: 0; 
			    overflow: hidden; 
			    position: absolute; 
			    z-index: -1;
			}
			#div-i-userDataContent p {
				display:flex;
				align-items:center;
			}
			#div-i-userDataContent p span {
				width: 54px;
				display:inline-block;
			}
			#div-i-userDataContent form p {
				margin-top: 32px;
				margin-bottom: 32px;
			}
			#div-i-userDataContent form p input {
				border-radius:6px;
				font-weight:bold;
				width:auto;
				flex-grow:1;
			}
			#span-i-submitUserData {
				font-size:20px;
			}
			#img-i-userAvatar {
				width:60px;
				height:60px;
				border-radius: 50%;
				margin-right:32px;
			}
			#form-i-submitUserData p:nth-child(4) {
/* 				justify-content:space-between;
				padding:0 28px; */
				
			}
		</style>
	</head>
	<body>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;background-color:#059BF3;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer;color: white;font-size: 20px;position: absolute;top:50%;transform:translateY(-50%);left:10px;"></a>
			<strong style="font-size: 20px;color: white;">修改资料</strong>
		</div>
		<div id="div-i-userDataContent" class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" >
			<div style="height:50px;"></div>
			<form action="/u/changeA1.do" id="form-i-submitUserData" method="post" enctype="multipart/form-data">
				<input onchange='PreviewImage(this)' type="file" name="file" id="file-input-addAvatar" class="inputfile" />
				<p><span style="display:inline-block;min-width:48px;">昵称：</span><input class="form-control input-lg" name="nicheng" placeholder="请输入新的昵称" value='${user.nicheng}' style="padding:10px 6px;" /></p>
				<%-- <p><span style="display:inline-block;min-width:48px;">QQ：</span><input id="input-qq-Number" name="qq" class="form-control input-lg" placeholder="QQ号" value='${user.qq}'  style="padding:10px 6px;" /></p> --%>
				<%-- <p id=""><img id="img-i-userAvatar" src="/d/cp/${user.avatar}" />
					<label for="file-input-addAvatar" class="btn btn-success">选择图片</label>
				</p> --%>
				<span id="span-i-submitUserData" class="form-control input-lg btn btn-primary">提交修改</span>
			</form>
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>		
	</body>
	<script type="text/javascript">
	var qq = /^\d{5,12}$/;  /* qq号码格式验证 */	
	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.JPEG$)|(\.*.GIF$)|(\.*.BMP$)/;
		if (!pattern.test(imgFile.value)) {
			alertme("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
			document.getElementById("img-i-userAvatar").src = "/d/cp/${user.avatar}"
			imgFile.focus();
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("img-i-userAvatar").src = path
			}
		}
	}		
	var bindSubmitBtn = function() {
		var btn = document.querySelector("#span-i-submitUserData")
		btn.addEventListener(getEndClickEvent(), function(event) {
			if ("${user.state}" === "2") {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "试玩账号无法修改资料，请注册正式账号")
				return
			}
		/* 	var qqTest = qq.test($("#input-qq-Number").val());
			if (!qqTest) {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：","QQ账号格式错误")
				return
			} */
			if ($("[name='nicheng']").val().trim() == "" || $("[name='nicheng']").val().length > 10) {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "昵称为空或长度过长")
				return
			}
			$("#form-i-submitUserData").submit()
			/* $("") */
			
		}) 
	}
	bindSubmitBtn()
			
	</script>
</html>